<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #a{
        width: 100px;
        height: 100px;
        border: 1px solid lawngreen;
    }
</style>
<body>
    <div id="app">
        <button @click="dj">点击我</button>
        <div id="a" v-if="yc===10">这是要显示的 div 内容</div>

        <button @click="qh">切换</button>
        <div v-if="cxyc">这是一个 div 元素</div>

        <button @click="zj" :disabled="num === 1"> - </button>
        <span>{{num}}</span>
        <button @click="js" :disabled="num >= 10"> + </button>
    </div>

</body>
<script src="./vue.js"></script>
<script>
    // 1. 对一个按钮点击十次后，让某个div显示出来
    // const { createApp, ref } = Vue;
    // const app = createApp({
    //     setup() {
    //         let yc = ref(0)
    //         function dj() {
    //             yc.value++;
    //         }
    //         return{
    //             dj,
    //             yc
    //         }
    //     }
    // })
    // app.mount('#app')

    //      2. 点击按钮，  如果div是显示状态，就把div隐藏，否则把div显示出来。 
    // const{createApp,ref}=Vue;
    // const app=createApp({
    //     setup(){
    //         let cxyc=ref(0)
    //         function qh(){
    //             cxyc.value =!cxyc.value;
    //         }
    //         return{
    //             cxyc,
    //             qh
    //         }
    //     }
    // })
    // app.mount('#app')
    //   3.  实现一个步进器 （购物车的加减）.   
    //   如果数量等于1时，减少按钮变成灰色不可点击状态，如果数量大于等于10时，增加按钮变成不可点击状态。
    const{createApp,ref}=Vue;
    const app=createApp({
        setup(){
            let num = ref(1);
            function zj(){
                num.value--
            } 
            function js(){
                num.value++
            } 
            return{
                num,
                zj,
                js
            }
        }
    })
    app.mount('#app')
</script>

</html>